<template>
  <div id="loading" v-if="loading">
     <div class="loading">
       <img src="/img/time.gif" width="264" height="204">
     </div>
  </div>

</template>

<script>
    export default {
      name: "loading",
      data: () => ({
      loading: false
    }),
    methods: {
      start () {
        this.loading = true;
      },
      finish () {
        this.loading = false;
      }
    }
    }
</script>

<style scoped>
  .loading{
    position: absolute;
    width: 264px;
    height: 204px;
    top: 50%;
    margin-top: -102px;
    left: 50%;
    margin-left: -132px;
  }

  #loading{
    background-color: white;
    height: 100vh;
    width: 100vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
  }

</style>
